<template>
<div>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="标题"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{scope.row.aTitle}}</span>
      </template>
    </el-table-column>
       <el-table-column
      label="作者"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{scope.row.author}}</span>
      </template>
    </el-table-column>
       <el-table-column
      label="时间"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{scope.row.createTime}}</span>
      </template>
    </el-table-column>
       <el-table-column
      label="缩略图"
      width="180">
      <template slot-scope="scope">
          <el-image
      style="width: 100px; height: 100px"
      :src="scope.row.img"
      fit="scale-down"></el-image>
      </template>
    </el-table-column>
       <el-table-column
      label="分类"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{scope.row.Fclass.className}}</span>
      </template>
    </el-table-column>
       <el-table-column
      label="标签"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{scope.row.table}}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.row._id)"
         >编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.row._id)"
         >删除</el-button>
      </template>
    </el-table-column>
   
  </el-table>
  <el-pagination
  @next-click="handleNextClick"
  @prev-click="handleprevClick"
  @current-change="handlePagerClick"
  background
  layout=" prev, pager, next"
  :total="total">
</el-pagination>
</div>
</template>

<script>
import {selectContent,recycleAdd,deleteContent,DeleteArticle} from '@/service/getData.js'
import {imgUrl} from '@/config/env.js'
import {mapMutations} from 'vuex'
  export default {
    data() {
      return {
        tableData:[],
        total:0,
        num:1
      }
    },
    methods: {
      ...mapMutations(['UPDATEID']),
      infoDatas(onenum,num){
        selectContent(onenum,num).then((data) => {
        this.tableData=data.data.data.data;
        this.total=data.data.data.sumPage*10;
        this.tableData.some(item => {
          item.img=imgUrl+item.img;
        })
      });
      }
      ,
      handleEdit(val) {
        this.UPDATEID(val);
        this.$router.push('/home/editArticle')
      },
       handleDelete(val) {
        let Info='';
        this.tableData.some(item => {
          if(item._id===val) {
            Info=item;
          }
        })
        DeleteArticle(Info._id);
        Info.Fclass=Info.Fclass.className;
       deleteContent(Info._id);
        delete Info._id;
        recycleAdd(Info);
        this.infoDatas(5,1);
      },
     handleNextClick(){
       this.num++;
        this.infoDatas(5,this.num);
      },handleprevClick(){
       this.num--;
        this.infoDatas(5,this.num);
      },handlePagerClick(val){
        this.infoDatas(5,val);
      }
    },
    created(){
      this.infoDatas(5,1);
    }
  }
</script>
<style>

</style>